<script setup>
import { ref } from "vue";

const active = ref(0);
const tabList = ["全部", "待支付", "进行中", "已拒绝", "已完成"];
</script>
<template>
	<van-tabs v-model:active="active">
		<van-tab :title="item" v-for="item in tabList" :key="item">
			<div class="m-[10px] flex items-center rounded-[10px] border border-[#357efe] bg-white px-[16px] py-[9px]">
				<van-icon
					size="4.3vw"
					name="https://oss.dingdongdr.com/static/user/%E6%8F%90%E9%86%92.png"
				/>&nbsp;&nbsp;您有1笔未支付医护上门的订单，请及时处理
			</div>
			<div class="m-[10px] rounded-[10px] bg-white p-[14px]">
				<div class="flex items-center justify-between">医护上门<span class="text-[#5288f5]">待支付</span></div>
				<div class="mb-[12px] mt-[6px] text-[#999999]">202404023</div>
				<div class="my-[8px] flex items-center justify-between text-[13px]">
					<div class="text-[#333333]"><span class="inline-block w-[76px] text-[#666666]">就诊人：</span>叶正强</div>
					<span>&yen;1.04</span>
				</div>
				<div class="mb-[8px] text-[13px] text-[#333333]">
					<span class="inline-block w-[76px] text-[#666666]">护理项目：</span>伤口护理
				</div>
				<div class="mb-[8px] text-[13px] text-[#333333]">
					<span class="inline-block w-[76px] text-[#666666]">预约医护：</span>测试医生
				</div>
				<div class="mb-[8px] text-[13px] text-[#333333]">
					<span class="inline-block w-[76px] text-[#666666]">器械名称</span>低负压吸引器
				</div>
				<div class="mb-[8px] text-[13px] text-[#333333]">
					<span class="inline-block w-[76px] text-[#666666]">租赁天数：</span>1天
				</div>
				<!-- 按钮 -->
				<div class="flex flex-row-reverse">
					<span
						class="ml-[10px] inline-block h-[30px] w-[80px] rounded-[20px] border bg-[#5288f5] text-center text-[13px] leading-[30px] text-[#ffffff]"
						>去支付</span
					>
					<span
						class="ml-[10px] inline-block h-[30px] w-[80px] rounded-[20px] border text-center text-[13px] leading-[30px]"
						>诊疗记录
					</span>
					<span
						class="ml-[10px] inline-block h-[30px] w-[80px] rounded-[20px] border text-center text-[13px] leading-[30px]"
						>服务评价
					</span>
				</div>
			</div>
		</van-tab>
	</van-tabs>
</template>
